<template>
  <div>
    <div>
      <el-table :data="users.slice((currentPage-1)*pagesize,currentPage*pagesize)"  border stripe @selection-change="selsChange" >
        <el-table-column label="序号" prop="id" />
        <el-table-column label="照明电量" prop="lighting"/>
        <el-table-column label="空调电量" prop="conditioner"/>
        <el-table-column label="总用电量" prop="total"/>
        <el-table-column label="总共电费" prop="money"/>
      </el-table>
    </div>
    <div class="pagei">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[3, 6, 9, 12]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'dianfei',
data () {
  return {
    dialogVisible: false,
    conditioner: '',
    lighting: '',
    schArr: [], // 分页数据源
    pagesize: 3,
    currentPage: 1,
    total: 0,
    tableData: [],
    search: '',
    search1: '',
    activeName: 'a',
    radio: '1',
    users: {},
    ruleForm: {
      tableData: [],
      dialogVisible: false,
      dialogUpdate: false,
      pageSize: 5,
      currentPage: 1,
      total: 0,
      disablePage: false
    },
  }
},
created () {
  const that = this
  this.getPages()
  // this.getPages();
  this.axios.post('http://localhost:8001/queryDianl')
      .then(function (response) {
        console.log(response)
        that.users = response.data
      })
},
  methods: {
    handleSizeChange (val) {
      this.getPageData()
      var s = this
      console.log(`每页 ${val} 条`)
      s.pagesize = val
      s.getPageData()
      console.log(s.pagesize)
    },
    handleCurrentChange (val) {
      this.getPageData()
      var ss = this
      console.log(`当前页: ${val}`)
      ss.currentPage = val
      ss.getPageData()
      console.log(ss.currentPage)
    },
    getPageData () {
      console.log('是否yes')
      var thats = this
      let start = (this.currentPage - 1) * this.pagesize
      let end = start + this.pagesize
      this.schArr = thats.users.slice(start, end)
      this.total = thats.users.length
    },
    getPages () {
      this.axios.post('http://localhost:8001/getCountDianl').then(response => {
        this.total = response.data
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

<style scoped>

</style>
